import React, { useState} from "react";
import {  Input, Table, Form, Button, Popconfirm, Image, message, Upload } from 'antd'


var hesdPortrait

const EditableCell = ({
    editing,
    dataIndex,
    title,
    record,
    index,
    children,
    ...restProps
  }) => {
    const NodeDom =(dataIndex === 'hesdPortrait')?  ( <Form.Item>
      <Upload  action="http://111.75.252.147:8888/app/scenic/picUpload" name="file" onChange={(info) => handleChange(info)}  >
    <Image preview={false} src={hesdPortrait} fallback="" style={{width: '60px', height: '60px'}}></Image >
 </Upload> 
 </Form.Item>)  :  (<Input />)
    return (
      <td {...restProps}>
        {editing ? (
          <Form.Item
          style={{alignContent: 'center', display: 'flex', alignItems: 'center', height: '100%'}}
            name={dataIndex}
            rules={[
              {
                required: true,
                message: `Please Input ${title}!`,
              },
            ]}
          >
          {NodeDom}
          </Form.Item>
        ) : (
          children
        )}
      </td>
    );
  };
  
  const handleChange = (info) => {
    if (info.file.status !== 'uploading') {
    }
    if (info.file.status === 'done') {
      hesdPortrait = info.file.response.data.url
      message.success('图片上传成功');
    } else if (info.file.status === 'error') {
      message.error('图片上传失败');
    }
  
  }
  
  
const EditableTable = (props) => {
    const List = props.data
    const { updateList, deleteList  } = props
    const [form] = Form.useForm();
    const [editingKey, setEditingKey] = useState('');
  
    const isEditing = (record) => record.key === editingKey;
  
    const edit = (record) => {
      form.setFieldsValue(
        record
      );
      hesdPortrait = record.hesdPortrait
      setEditingKey(record.key);
    };
  
    const cancel = () => {
      setEditingKey('');
    };
  
    const save = async (key) => {
        const row = await form.validateFields()
        const data = {...List[key], ...row,hesdPortrait}
        updateList(data)
        setEditingKey('');
    };

    const deleteUser = (id) => {
      deleteList(id)
    }
  
    const columns = [
      {
        title: '管理员Id',
        dataIndex: 'adminId',
        width: '80px',
        editable: false,
        align: 'center' ,
      },
      {
        title: '用户名',
        dataIndex: 'username',
        width: '160px',
        editable: true,
        align: 'center' ,
      },
      {
        title: '昵称',
        dataIndex: 'name',
        width: '180px',
        editable: true,
        align: 'center' ,
      },
      {
        title: '头像',
        dataIndex: 'hesdPortrait',
        width: '100px',
        align: 'center' ,
        editable: true,
        render: (_,record) => {
          return <Image  src={record.hesdPortrait} fallback="" style={{width: '60px', height: '60px'}}></Image >
        }
      },
      {
        title: '角色',
        dataIndex: 'srole',
        width: '220px',
        align: 'center' ,
        editable: true,
      },
      {
        title: '操作',
        align: 'center' ,
        dataIndex: 'operation',
        width: '180px',
        render: (text,record) => {
          const editable = isEditing(record);
          return editable ? (
            <div style={{display: 'flex',marginTop: '-18px', justifyContent: 'space-around', justifyItems: 'space-around'}}>
                 <Button  onClick={() => save(record.key)} className="successBtn">修改</Button>
                 <Button  onClick={() => cancel()} className="backBtn">取消</Button>
            </div>
          ) : (
            <div  style={{display: 'flex', justifyContent: 'space-around'}}>
              <Button onClick={() => edit(record)} className="editBtn">编辑</Button>
              <Popconfirm title="改操作将会有就删除这条数据, 是否继续" onConfirm={() => deleteUser(record.adminId)} okText="确认" cancelText="取消">
              <Button className="deleteBtn">删除</Button>
              </Popconfirm>
            </div>
          );
        },
      },
    ];
    const mergedColumns = columns.map((col) => {
      if (!col.editable) {
        return col;
      }
  
      return {
        ...col,
        onCell: (record) => ({
          record,
          dataIndex: col.dataIndex,
          title: col.title,
          editing: isEditing(record),
        }),
      };
    });

    return (
      <Form form={form} component={false}>
        <Table
          components={{
            body: {
              cell: EditableCell,
            },
          }}
          pagination={false}
          bordered
          dataSource={List}
          columns={mergedColumns}
          rowClassName="editable-row"
        />
      </Form>
    );
  };

  export default EditableTable;
  
  
  
  